{% extends "baseLarge.html" %}

{% block fades %}
  fadeColor("largeBox","#000000",{{fgColor|safe}},5,10,'b');
  fadeColor("description","#000000",{{fgColor|safe}},5,10,'b');
  fadeColor("directions","#000000",{{fgColor|safe}},5,10,'b');
  fadeColor("button","#000000",{{fgColor|safe}},5,10,'b');
  fadeColor("name","#000000",{{fgColor|safe}},5,10,'b');
  fadeColor("year","#000000",{{fgColor|safe}},5,10,'b');
  fadeColor("heading","#000000","#898989",5,10,'f');
{% endblock %}

{% block javascript %}
function myUpdate(name, year, description)
{
document.getElementById('name').value=name;
document.getElementById('year').value=year;
document.getElementById('description').value=description;
document.getElementById('type').value=type;
}
{% endblock %}

{% block contentLarge %}
  <div id="myPar">
    <p>
    <form id=edit method="post">
      <input id=myid name=myid value="{{wine.key.id}}" hidden>
      <label for=name>Navn</label>
      <input id=name name=name value="{{wine.name}}" required autofocus>
      <br>
      <label for=year>&Aring;rgang</label>
      <input id=year name=year value="{{wine.year}}">
      <br>
      <label for=type>Type</label>
      <select name="type">
        <option value="red" {% if wine.wineType == "red" %} selected=yes {% endif %}>R&oslash;d</option>
        <option value="rose" {% if wine.wineType == "rose" %} selected=yes {% endif %}>Rose</option>
        <option value="white" {% if wine.wineType == "white" %} selected=yes {% endif %}>Hvid</option>
        <option value="champagne" {% if wine.wineType == "champagne" %} selected=yes {% endif %}>Champagne</option>
      </select>
      <br>
      <label for=description>Beskrivelse</label>
      <textarea id=description name=description type=textarea rows=10>
{{wine.description}}</textarea>
      <p>
      <button type=submit name=button>Gem</button>
    </form>
    <p>
    {% for wine in wineList %}
      {{wine.name}}, {{wine.year}} 
      <button onclick="myUpdate('{{wine.name}}', '{{wine.year}}', '{{wine.description}}');">Kopier</button>
      <br>
    {% endfor %}
      
  </div>
{% endblock %}
